<!--//查询所有题库-->
<template>
  <div class='exam'>
    <el-row :gutter='20'>
      <el-col :span='8'>
        <el-input class='input' clearable v-model='paginationage.msg' @clear='getAnswerInfoPage'>
          <el-button slot='append' icon='el-icon-search' @click='getAnswerInfoPage'></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table :data='paginationage.records' border :row-class-name='tableRowClassName'>
      <el-table-column fixed='left' prop='subject' label='试卷名称' width='180'></el-table-column>
      <el-table-column prop='question' label='题目信息' width='290'></el-table-column>
      <el-table-column prop='section' label='所属章节' width='200'></el-table-column>
      <el-table-column prop='type' label='题目类型' width='200'></el-table-column>
      <el-table-column prop='score' label='试题分数' width='150'></el-table-column>
      <el-table-column label='操作' width='150'>
        <template slot-scope='scope'>
          <el-button type='primary' size='mini' @click='editVistorDialog(scope.row.questionId, scope.row.type)'>修改</el-button>
          <el-button type='danger' size='mini' @click='removeAnswer(scope.row.questionId, scope.row.type)'>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    分页-->
    <el-pagination
      @size-change='handleSizeChange'
      @current-change='handleCurrentChange'
      :current-page='paginationage.current'
      :page-sizes='[2, 5, 8, 10]'
      :page-size='paginationage.size'
      layout='total, sizes, prev, pager, next, jumper'
      :total='total'
      class='page'
    ></el-pagination>

<!--    修改对话框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
    @close='editVistorDialogClosed'>
      <el-form :model="editForm" ref="ruleForm" label-width="100px">
        <el-form-item label="试卷名称">
          <el-input v-model="editForm.subject" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="题目信息">
          <el-input v-model="editForm.question"></el-input>
        </el-form-item>
        <el-form-item label="所属章节">
          <el-input v-model="editForm.section"></el-input>
        </el-form-item>
        <el-form-item label="题目类型">
          <el-input v-model="type" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editVistorForm(type)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // pagination: {
      //   //分页后的考试信息
      //   current: 1, //当前页
      //   total: null, //记录条数
      //   size: 100 //每页条数
      // },
      paginationage: {
        //分页后的考试信息
        msg: "",
        current: 1, //当前页
        size: 5 //每页条数
      },
      total: 0, //记录条数，
      dialogVisible: false,
      editForm: {},
      type: ''
      // editFormRules: {
      //   subject: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      // }
    }
  },
  created() {
    console.log(this.paginationage)
    this.getAnswerInfoPage()
  },
  methods: {
    // getAnswerInfo() {
    //   //分页查询所有试卷信息
    //   this.$axios(
    //     `/api/answers/${this.pagination.current}/${this.pagination.size}`
    //   )
    //     .then(res => {
    //       console.log(res.data)
    //       this.pagination = res.data.data
    //       console.log(this.pagination)
    //     })
    //     .catch(error => {
    //     })
    // },
    getAnswerInfoPage() {
      // console.log(this.paginationage)
      this.$axios({
        url: '/api/answers',
        method: 'post',
        data: {
          ...this.paginationage
        }
      }).then(res => {
        this.paginationage = res.data.data
        this.total = res.data.data.total
        // console.log(this.paginationage)
      }).catch(error => {
      })
    },
    //改变当前记录条数
    handleSizeChange(val) {
      console.log('条数'+val)
      this.paginationage.size = val
      this.getAnswerInfoPage()
    },
    //改变当前页码，重新发送请求
    handleCurrentChange(val) {
      console.log('页码'+val)
      this.paginationage.current = val
      this.getAnswerInfoPage()
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    removeAnswer(id, type) {
      // console.log(id, type)
      if (type === '填空题') {
        this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.delete(`/api/fillQuestion/${id}`).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getAnswerInfoPage()
          }).catch(error => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })

      } else if (type === '判断题') {
        this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.delete(`/api/judgeQuestion/${id}`).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getAnswerInfoPage()
          }).catch(error => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else if (type === '选择题') {
        this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.delete(`/api/MultiQuestion/${id}`).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getAnswerInfoPage()
          }).catch(error => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message.error('错误')
      }

    },
    editVistorDialog(id, type) {
      this.type = type
      if (type === '判断题') {
        this.$axios(`/api/judgeQuestion/${id}`).then(res => {
          this.editForm = res.data.data
          console.log(this.editForm)
        }).catch(error =>{})
      } else if (type === '选择题') {
        this.$axios(`/api/MultiQuestion/${id}`).then(res => {
          this.editForm = res.data.data
          console.log(this.editForm)
        }).catch(error =>{})
      } else if (type === '填空题') {
        this.$axios(`/api/fillQuestion/${id}`).then(res => {
          this.editForm = res.data.data
          console.log(this.editForm)
        }).catch(error =>{})
      } else {
        this.$message.error('错误')
      }
      this.dialogVisible = true
    },
    editVistorDialogClosed() {
      this.editForm = {}
    },
    editVistorForm(type) {
      if (type === '选择题') {
        this.$axios({
          url: '/api/MultiQuestion',
          method: 'put',
          data: {
            ...this.editForm
          }
        }).then(res => {
          this.getAnswerInfoPage()
          this.$message.success('更新成功')
        }).catch(error => {
          console.log(error)
        })
      } else if (type === '填空题') {
        this.$axios({
          url: '/api/fillQuestion',
          method: 'put',
          data: {
            ...this.editForm
          }
        }).then(res => {
          this.getAnswerInfoPage()
          this.$message.success('更新成功')
        }).catch(error => {})
      } else if (type === '判断题') {
        this.$axios({
          url: '/api/judgeQuestion',
          method: 'put',
          data: {
            ...this.editForm
          }
        }).then(res => {
          this.getAnswerInfoPage()
          this.$message.success('更新成功')
        }).catch(error => {})
      }else {
        this.$message.error('错误')
      }
      this.dialogVisible = false
    }
  }
}
</script>
<style lang='scss' scoped>
.exam {
  padding: 0px 40px;

  .page {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .edit {
    margin-left: 20px;
  }

  .el-table tr {
    background-color: #DD5862 !important;
  }
}

.el-table .warning-row {
  background: #000 !important;

}

.el-table .success-row {
  background: #DD5862;
}

.el-table {
  margin-top: 15px;
}
/*最外层透明*/
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background-color: transparent;
}

/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}

.input >>> input {
  background: none;
  border: 1px solid #bdbdbd;
}
</style>
